<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>句读知不知</title>
    <link rel="stylesheet" href="https://gxwtf.cn/css/fa-pro/css/all.min.css">
    <link rel="stylesheet" href="/css/basic.css">
    <script src="/js/backButton.js"></script>
    <script src="/js/navbar.js"></script>
    <style>
        :root {
            --primary: #2c3e50;
            --correct: #27ae60;
            --wrong: #e74c3c;
            --missing: #f1c40f;
            --text: #34495e;
            --meta: #6c757d;
            --subtitle: #6c757d;
        }

        .header {
            background: white;
            padding: 20px 20px;
            margin-top: 20px;
            margin-bottom: 30px;
            position: relative;
        }

        .game-title {
            font-size: 2.8rem;
            color: #2c3e50;
            margin: 0 0 15px;
            letter-spacing: 1.5px;
            text-align: center;
            position: relative;
            line-height: 1.2;
        }

        .game-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: #e74c3c;
            margin: 15px auto 0;
            border-radius: 2px;
        }

        .subtitle {
            color: var(--subtitle);
            font-size: 1.2rem;
            text-align: center;
            margin: 20px auto;
            max-width: 680px;
            line-height: 1.6;
            letter-spacing: 0.5px;
        }

        .poem-name {
            font-size: 2rem;
            color: var(--primary);
            text-align: center;
            margin: 15px 0;
            font-weight: 500;
            letter-spacing: 1px;
        }

        .poem-meta {
            margin-top: 25px;
            font-size: 1.1rem;
            color: var(--meta);
            text-align: center;
            margin-bottom: 20px;
        }

        .poem-meta a {
            color: var(--primary-color);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding-bottom: 2px;
            text-decoration: none;
        }

        .poem-meta a:hover {
            color: var(--primary-color-hover);
            text-decoration: none;
        }

        /* 统计颜色 */
        .stat-correct {
            color: var(--correct);
        }

        .stat-wrong {
            color: var(--wrong);
        }

        .stat-missing {
            color: var(--missing);
        }

        .sentence-container {
            background: white;
            border-radius: 16px;
            padding: 40px;
            position: relative;
            margin-bottom: 30px;
            margin-top: 20px;
            cursor: pointer;
        }

        .sentence-content {
            font-size: 1.5rem;
            line-height: 2.4;
            color: var(--text);
            letter-spacing: 1px;
            word-spacing: 8px;
        }

        .sentence-content span {
            display: inline-block;
            vertical-align: middle;
            position: relative;
        }

        .sentence-gap {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 0px;
            position: relative;
            cursor: pointer;
            vertical-align: left;
            transition: all 0.2s;
        }

        .sentence-gap::after {
            content: '/';
            position: absolute;
            left: 80%;
            top: 55%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            opacity: 0;
            transition: opacity 0.2s, color 0.3s;
        }

        .sentence-gap.active::after {
            opacity: 1;
        }

        .sentence-gap.correct::after {
            color: var(--correct);
            animation: pop 0.3s;
        }

        .sentence-gap.wrong::after {
            color: var(--wrong);
            animation: shake 0.4s;
        }

        .sentence-gap.missing::after {
            color: var(--missing);
            animation: pulse 1s infinite;
        }

        .submit-button {
            display: block;
            margin: 30px auto;
            padding: 14px 36px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 1.1rem;
            letter-spacing: 1px;
            transition: all 0.2s;
            box-shadow: 0 4px 15px rgba(44, 62, 80, 0.2);
        }

        .submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(44, 62, 80, 0.3);
            background: #1e2b37;
        }

        .legend {
            max-width: 800px;
            margin: 30px auto;
            display: none;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            animation: fadeIn 0.6s ease;
        }

        .legend-item {
            display: inline-flex;
            align-items: center;
            margin-right: 25px;
            font-size: 1rem;
        }

        .legend-marker {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            margin-right: 8px;
        }

        .stats {
            max-width: 800px;
            margin: 25px auto;
            text-align: center;
            font-size: 1.1rem;
            color: var(--text);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            border-radius: 20px;
            background: var(--primary-color);
            color: white !important;
            text-decoration: none;
            transition: all 0.3s ease;
            margin-top: 20px;
        }

        .back-button i {
            margin-right: 8px;
        }

        .back-button:hover {
            background: var(--primary-color-hover);
            transform: translateX(-3px);
        }



        @keyframes pop {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                transform: translate(-50%, -50%) scale(1.4);
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes shake {
            0% {
                transform: translate(-50%, -50%) translateX(0);
            }

            25% {
                transform: translate(-50%, -50%) translateX(4px);
            }

            50% {
                transform: translate(-50%, -50%) translateX(-4px);
            }

            75% {
                transform: translate(-50%, -50%) translateX(2px);
            }

            100% {
                transform: translate(-50%, -50%) translateX(0);
            }
        }

        @keyframes pulse {
            0% {
                opacity: 0.8;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0.8;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .game-title {
                font-size: 2rem;
            }
        }
    </style>
</head>

<body>
    <div id="navbar-container"></div>

    <div class="header">
        <a href="#" class="back-button">
            <i class="fa-solid fa-arrow-left"></i>
            返回
        </a>
        <h1 class="game-title">句读知不知</h1>
        <p class="subtitle">课本上的每一篇新文章都是一个很好的练习断句的机会</p>
    </div>

    <div class="sentence-container">
        <div class="poem-name" id="poem-name"></div>
        <div class="poem-meta" id="poemMeta"></div>
        <div class="sentence-content" id="sentenceContainer"></div>
    </div>

    <button class="submit-button" id="submitButton">提交答案</button>

    <div class="legend">
        <div class="legend-item">
            <div class="legend-marker" style="background: var(--correct);"></div>
            正确断句
        </div>
        <div class="legend-item">
            <div class="legend-marker" style="background: var(--wrong);"></div>
            错误标记
        </div>
        <div class="legend-item">
            <div class="legend-marker" style="background: var(--missing);"></div>
            遗漏断句
        </div>
    </div>
    <div class="stats" id="statsContainer"></div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const sentenceContainer = document.getElementById('sentenceContainer');
            const submitButton = document.getElementById('submitButton');
            const statsContainer = document.getElementById('statsContainer');
            const legend = document.querySelector('.legend');
            let userBreaks = new Set();

            async function loadGame() {
                const title = decodeURIComponent(location.pathname.split('/').pop());
                const res = await fetch(`/game/breakSentence/getPoem/${title}`);
                const data = await res.json();

                document.title = `「${data.title}」句读练习`;
                document.getElementById('poem-name').textContent = data.title;
                document.getElementById('poemMeta').innerHTML = `
                    【${data.dynasty}】<a href="/author/${encodeURIComponent(data.author)}" 
                    class="author-link">${data.author}</a>
                `;

                sentenceContainer.innerHTML = data.content.split('').map((char, index) => `
                    <span>${char}</span><span class="sentence-gap" data-index="${index}"></span>
                `).join('');

                document.querySelectorAll('.sentence-gap').forEach(gap => {
                    gap.addEventListener('click', function () {
                        const index = parseInt(this.dataset.index);
                        this.classList.toggle('active');
                        userBreaks.has(index) ? userBreaks.delete(index) : userBreaks.add(index);
                    });
                });
            }

            submitButton.addEventListener('click', async () => {
                const title = decodeURIComponent(location.pathname.split('/').pop());
                const res = await fetch(`/game/breakSentence/getResult/${title}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ userBreaks: [...userBreaks] })
                });
                const result = await res.json();

                document.querySelectorAll('.sentence-gap').forEach(gap => {
                    gap.classList.remove('correct', 'wrong', 'missing');
                    const index = parseInt(gap.dataset.index);

                    if (result.correctBreaks.includes(index)) gap.classList.add('correct');
                    if (result.wrongBreaks.includes(index)) gap.classList.add('wrong');
                    if (result.missingBreaks.includes(index)) gap.classList.add('missing');
                });

                legend.style.display = 'block';
                statsContainer.innerHTML = `
                    <span class="stat-correct">正确：${result.correct}处</span> | 
                    <span class="stat-wrong">错误：${result.errors}处</span> | 
                    <span class="stat-missing">遗漏：${result.missing}处</span>
                `;
                submitButton.style.display = 'none';
            });

            loadGame();
        });
    </script>
</body>

</html>